import React,{useEffect,useState}from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Input, Form, InputNumber,Descriptions,Tag,message } from 'antd';
import { connect,history } from 'umi';
import Yuan from '@/utils/Yuan';
import Contanst from '@/config/contanst'
import {memberCardDeductMoney} from '../service';
const FormItem = Form.Item;
const { TextArea } = Input;
const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 15,
      },
      md: {
        span: 15,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 5,
      },
    },
  };
const DeductionCard = props =>{
    const {dispatch,vipCard,match} =props;
    const [form] = Form.useForm();
    useEffect(() => {
        if (dispatch) {
            dispatch({
                type: 'cubeVipCardOper/getMemberCardInfo',
                payload:{
                    cardId:match.params.cardId,
                    memberId:match.params.memberId
                }
              })
         }
       }, []);
    /**
     *  保存
     * @param {*} values 
     */
    const onFinish = async () =>{
      const values = await form.validateFields();
      if(vipCard.cardType == '2'){
        if(!values.numberGroupLessons && !values.numberSmallClasses && !values.numberPrivateTeaching){
          message.warn('大班课、小班课、私教课至少选择一个扣除。')
          return;
        }
      }
      if(values){
        const hide = message.loading('正在扣卡');
        try {
          let result = await memberCardDeductMoney({
            cardId:vipCard.cardId,
            memberId:vipCard.memberId,
            cardType:vipCard.cardType,
            ...values
          });
          hide();
          if(result.code ==0){
            message.success('扣卡成功，即将跳转');
            history.push(`/vip/bind-card`);
            return true;
          }else{
            message.error(result.message);
            return false; 
          }
        } catch (error) {
          hide();
          message.error('扣卡失败，请重试');
          return false;
        }
      }
    }
    return <PageHeaderWrapper>
        <Card title="会员卡信息" style={{marginBottom:32}}>
        <Descriptions size="small">
            <Descriptions.Item label="会员"><a onClick={()=>go2VipDetail()}>{vipCard.memberName}</a></Descriptions.Item>
            <Descriptions.Item label="会员卡类型">{Contanst.MemberCardTypeMap[vipCard.cardType]}</Descriptions.Item>
            <Descriptions.Item label="会员卡名称">{vipCard.cardName}</Descriptions.Item>
            <Descriptions.Item label="会员卡创建时间">{vipCard.createTime}</Descriptions.Item>
            <Descriptions.Item label="当前状态"><Tag>{Contanst.CardBindStatusMap[vipCard.cardStatus]}</Tag></Descriptions.Item>
            {
                vipCard.cardType=='3'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余天数">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            {
                 vipCard.cardType=='2'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余次数">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            {
                 vipCard.cardType=='1'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余金额">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            <Descriptions.Item label="累计实收金额"><Yuan>{vipCard.totalMoney}</Yuan></Descriptions.Item>
            <Descriptions.Item label="开卡场馆">{vipCard.venueName}</Descriptions.Item>
            <Descriptions.Item label="备注">{vipCard.zb}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title="会员卡扣费">
        <Form style={{
                    marginTop: 8,
                }}
                form={form}
                name="basic"
                >
            {
              vipCard.cardType=='1'&&<FormItem
                {...formItemLayout}
                label="减少"
                name="storedValueAmount"
                rules={[
                {
                    required: true,
                    message: '请输入扣除金额',
                },
                ]}
            >
                <InputNumber
                placeholder="请输入扣除金额"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}元`}
                parser={value => value.replace('元', '')}
                />
            </FormItem>
            }
            {
              vipCard.cardType=='2'&&<>
              <FormItem
                {...formItemLayout}
                label="减少大班课"
                name="numberGroupLessons"
 
            >
                <InputNumber
                placeholder="请输入扣除大班课次数"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
                />
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="减少小班课"
                name="numberSmallClasses"

            >
                <InputNumber
                placeholder="请输入扣除小班课次数"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
                />
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="减少私教课"
                name="numberPrivateTeaching"

            >
                <InputNumber
                placeholder="请输入扣除私教课次数"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
                />
            </FormItem>
              </>
            }
            {
              vipCard.cardType=='3'&&<FormItem
                {...formItemLayout}
                label="减少"
                name="durationDays"
                rules={[
                {
                    required: true,
                    message: '请输入扣除天数',
                },
                ]}
            >
                <InputNumber
                placeholder="请输入扣除天数"
                min={0}
                style={{width:'100%'}}
                formatter={value => `${value}天`}
                parser={value => value.replace('天', '')}
                />
            </FormItem>
            }
            <FormItem
                {...formItemLayout}
                label="备注信息"
                name="zb"
            >
                <TextArea rows={4} placeholder="请输入"/>
            </FormItem>
            <FormItem
                {...submitFormLayout}
                style={{
                marginTop: 32,
                }}
            >
                <Button type="primary" onClick={onFinish}>
                提交
                </Button>
                <Button
                style={{
                    marginLeft: 8,
                }}
                onClick={()=>window.history.back()}
                >
                返回
                </Button>
            </FormItem>
            </Form>
        </Card>
    </PageHeaderWrapper>
}

export default connect(({ loading,cubeVipCardOper }) => ({
    vipCard: cubeVipCardOper.vipCard
  }))(DeductionCard);